﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>2-11</title>
    <!--   引入jQuery -->
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="../styles/selectstyle.css" />
    <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function () {
            //1对表单内 可用input 赋值操作.http://blog.csdn.net/jiakw_1981/article/details/44590219
            //想知道为什么<a>和<input>里都需要加return false;,而<botton>里不需要吗?
            //因为<a>和<input>的onclick事件本身就包含了form.submit();,如果不加return false;那么实际上submit处理被调用了2次,如果debug的话可以看出来的!
            //而<botton>的onclick事件本身没有包含form.submit();,所以不需要追加return false;来控制2重调用!
           


            //2对表单内 不可用input 赋值操作.
            


            //3点击多选框时，找到索引值为0的div展示多选框选中的个数
            //文字内容为（有n个多选框被选中了），且加粗展示
            //使用:checked选择器，来操作多选框.
           


            //4点击下拉列表时，找到索引值为1的div展示每个下拉列表选中的文本信息展示
            //使用:selected选择器，来操作下拉列表.
            


            //重置表单元素
            

        });
        //]]>
    </script>
</head>
<body>
    <h3> 表单对象属性过滤选择器.</h3>
    <form id="form1" action="#">
        <button type="reset">重置所有表单元素</button>
        <br /><br />
        <button id="btn1">对表单内 可用input 赋值操作.</button>
        <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />

        可用元素：<input name="add" value="可用文本框" id="textadd" />  <br />
        不可用元素：<input name="email" disabled="disabled" value="不可用文本框" /><br />
        可用元素： <input name="che" value="可用文本框" /><br />
        不可用元素：<input name="name" disabled="disabled" value="不可用文本框" /><br />
        <br />
        多选框：<br />
        <input type="checkbox" name="newsletter" checked="checked" value="test1" />ADC
        <input type="checkbox" name="newsletter" value="test2" />辅助
        <input type="checkbox" name="newsletter" value="test3" />法师
        <input type="checkbox" name="newsletter" checked="checked" value="test4" />打野
        <input type="checkbox" name="newsletter" value="test5" />战士
        //展示多选框选中的个数
        <div></div>

        <br /><br />
        下拉列表ADC：<br />
        <select name="test" multiple="multiple" style="height:100px">
            <option>女警</option>
            <option selected="selected">金克斯</option>
            <option>EZ</option>
            <option selected="selected">奥巴马</option>
            <option>飞机</option>
            <option>寒冰</option>
        </select>

        <br /><br />
        下拉列表辅助：<br />
        <select name="test2">
            <option>宝石</option>
            <option>风女</option>
            <option selected="selected">机器人</option>
            <option>唤潮鲛姬</option>
            <option>众星之子</option>
            <option>琴女</option>
        </select>
        <br /><br />
        <div></div>
    </form>
</body>
</html>
